import React from 'react'
import { Divider, Row, Spin } from 'antd'
import AssignmentsSurveyQuizzesOverviewBox from './assignments-survey-quizzes-overview-box'
import AssignmentsSurveyQuizzesStatusBox from './assignments-survey-quizzes-status-box'
import TagSelectBox from '../../../../common/tag-select-box'
import { convertContent } from '../../../../../constant/lang-util'
import RefreshTool from '../../../../common/refresh-tool'
import { getAssignmentsSurveyQuizzesOverview } from '../../../../../actions/program'
import { getStudentTagsByProgramId } from '../../../../../actions/student-tag'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'

class AssignmentsSurveyQuizzesBody extends React.Component {
  state = {
    isOverviewShow: true,
    currentAssignment: '',
    assignmentId: -1,
    tag: null,
    spinning: true
  }

  componentDidMount = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    if (user.id > 0) {
      this.props.getAssignmentsSurveyQuizzesOverview(programId, user.id, `学员调研题总览`, () => {
        this.setState({spinning: false,programId})
      })
    }
  }
  componentWillReceiveProps = nextProps => {
    const {user} = nextProps
    if (this.props.user === user ) {
      return false
    }
    const {programId} = this.props.match.params
    this.props.getAssignmentsSurveyQuizzesOverview(programId, user.id, `学员调研题总览`, () => {
      this.setState({spinning: false,programId})
    })
  }
  refreshAssignmentsSurveyQuizzesOverview = () => {
    const {user} = this.props
    const {programId} = this.props.match.params
    this.setState({spinning: true})
    this.props.getAssignmentsSurveyQuizzesOverview(programId, user.id, `学员调研题总览`, () => {
      this.setState({spinning: false,programId})
    },false)
  }

  filter = assignmentsSurveyQuizzesOverview => {
    return assignmentsSurveyQuizzesOverview.filter(item => !!item.assignmentId)
  }

  getAssignmentsBasicQuizzesStatus = (item) => {
    const {assignmentId, assignmentTitle, taskTitle} = item
    this.setState({
      assignmentId,
      isOverviewShow: false,
      currentAssignment: `${taskTitle}- ${assignmentTitle}`
    })
  }
  getAssignmentsQuizzesByTag = tagId => {
    const {userTags} = this.props
    const tag = userTags.find(tag => tag.id === tagId)
    this.setState({tag})
  }
  resetStatus = () => {
    this.setState({currentAssignment: '', isOverviewShow: true, tag: null})
  }

  filterByAssignmentIdAndTag = (assignmentId, tag) => {
    return tag
      ? this.props.assignmentsSurveyQuizzesOverview.data
        .filter(item => assignmentId === item.assignmentId && (item.tag || '').includes(tag.name))
      : this.props.assignmentsSurveyQuizzesOverview.data
        .filter(item => assignmentId === item.assignmentId)
  }

  render () {
    const {isOverviewShow, spinning, currentAssignment, assignmentId, tag, programId} = this.state
    const {userTags,assignmentsSurveyQuizzesOverview} = this.props

    return <Spin size="large" spinning={spinning} tip='loading'>

      {isOverviewShow
        ? <div>
          <Row type='flex' justify='end'>
            <RefreshTool
              refresh={this.refreshAssignmentsSurveyQuizzesOverview}
              refreshTime={assignmentsSurveyQuizzesOverview.refreshTime}
            />
          </Row>
          <Divider/>
          <AssignmentsSurveyQuizzesOverviewBox
            programId={programId}
            assignmentsSurveyQuizzesOverview={this.filter(assignmentsSurveyQuizzesOverview.data)}
            getAssignmentsSurveyQuizzesStatus={this.getAssignmentsBasicQuizzesStatus}
          />
        </div>
        : <span>
          <Row type='flex' justify='space-between'>
          <a onClick={this.resetStatus}>
            {convertContent('返回')} | {currentAssignment}
        </a>
          <span>Tag: <TagSelectBox
            tags={userTags}
            handleChange={this.getAssignmentsQuizzesByTag}/>
          </span>
          </Row>
        <Divider/>
        <AssignmentsSurveyQuizzesStatusBox
          assignmentsSurveyQuizzesOverview={this.filterByAssignmentIdAndTag(assignmentId, tag)}
        />
      </span>

      }
    </Spin>

  }
}

const mapStateToProps = ({assignmentsSurveyQuizzesOverview,userTags, user}) => ({
  assignmentsSurveyQuizzesOverview, user,userTags
})
const mapDispatchToProps = dispatch => ({
  getAssignmentsSurveyQuizzesOverview: (programId, tutorId, type, callback,fromCache) => dispatch(getAssignmentsSurveyQuizzesOverview(programId, tutorId, type, callback,fromCache)),
  getStudentTagsByProgramId: programId => dispatch(getStudentTagsByProgramId(programId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(AssignmentsSurveyQuizzesBody))
